<template>
  <div class="news-wrapper">
    <div class="top">
      <div class="title-wrapper">
        <div class="title">消息推送</div>
      </div>
      <el-button type="primary" @click="addNews">添加</el-button>
    </div>
    <div class="content">
      <el-table :data="list" style="width: 100%" :height="height">
        <el-table-column prop="title" label="标题" width="180">
          <template slot-scope="scope">
            <div v-html="scope.row.title" />
          </template>
        </el-table-column>
        <el-table-column prop="center" label="内容" width="180">
          <template slot-scope="scope">
            <div v-html="scope.row.center" />
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="发送时间" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <span class="primary" @click="handleWithDraw(scope)">撤回</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      class="pagination"
      :list="list"
      :total="total"
      :page-size="pageSize"
      :cur-page="currentPage"
      @nextPage="handleNextPage"
    />
    <Dialog ref="dialog" class="dialog" title="消息推送" @closeDialog="confirm">
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="标题：" prop="title">
          <el-input v-model="form.title" size="medium" style="width: 300px" />
        </el-form-item>
        <el-form-item label="内容：" prop="center">
          <Editor @catchData="handleCatchData" />
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>
<script>
import { getNewsList, withDrawMessage, setNewsItem } from '@/api/platform-setting'
import Dialog from '@/common/dialog'
import Editor from '@/common/editor'
import Pagination from '@/common/pagination'
const ERR_OK = 200
export default {
  components: {
    Dialog,
    Editor,
    Pagination
  },
  data() {
    return {
      form: {
        title: '',
        center: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在20个字符以内', trigger: 'blur' }
        ],
        center: [
          { required: true, message: '请输入内容', trigger: 'change' }
        ]
      },
      height: 0,
      list: [],
      total: 0,
      pageSize: 10,
      currentPage: 1
    }
  },
  created() {
    this._getNewsList()
    this.setHeight()
  },
  methods: {
    addNews() {
      this.$refs.dialog.show()
    },
    confirm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.currentPage = 1
          this._setNewsItem(this.form)
            .then(() => {
              this._getNewsList(this.currentPage)
            })
        } else {
          this.$refs.dialog.show()
          return false
        }
      })
    },
    handleNextPage(curPage) {
      this.currentPage = curPage
      this._getNewsList(this.currentPage)
    },
    handleCatchData(txt) {
      this.form.center = txt
    },
    handleWithDraw(scope) {
      this._withDrawMessage(scope.row.id)
        .then(() => {
          this.currentPage = 1
          this._getNewsList(this.currentPage)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    setHeight() {
      this.height = document.body.clientHeight - 230
      window.onresize = () => {
        this.height = document.body.clientHeight
      }
    },
    _getNewsList(page) {
      getNewsList(page)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.total = res.data.total
            this.list = res.data.list
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _withDrawMessage(id) {
      return withDrawMessage(id)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this._success('撤回成功')
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    _setNewsItem({ title, center }) {
      return setNewsItem({ title, center })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this._success('添加成功')
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    _success(message) {
      this.$message({
        type: 'success',
        message,
        showClose: true
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-table.scss";
@import '@/styles/el-pagination.scss';
.news-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .title-wrapper {
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
  .content {
    margin-top: 20px;
  }
  .dialog /deep/ .el-dialog{
    min-width: 1000px;
  }
}
.primary {
  color: #409eff;
  cursor: pointer;
  padding: 0 15px;
}
</style>
